Skip to content

feat(text-input): form submission - #2647

Merged
bennypowers merged 3 commits into
mainfrom
feat/input/submit
Nov 14, 2023
Merged

feat(text-input): form submission#2647
bennypowers merged 3 commits into
mainfrom
feat/input/submit

Conversation

@bennypowers

Copy link
Copy Markdown
Member

What I did

  1. submit the form on enter

@bennypowers
bennypowers requested a review from kylebuch8 November 7, 2023 15:26
@changeset-bot

changeset-bot Bot commented Nov 7, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3ec82a6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/elements Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@bennypowers
bennypowers enabled auto-merge (squash) November 7, 2023 15:26
@github-actions github-actions Bot added the functionality Functionality, typically pertaining to the JavaScript. label Nov 7, 2023
@netlify

netlify Bot commented Nov 7, 2023

Copy link
Copy Markdown

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 291e5e6
😎 Deploy Preview https://deploy-preview-2647--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions Bot added the AT passed Automated testing has passed label Nov 7, 2023
@bennypowers bennypowers added this to the PatternFly Elements 3 milestone Nov 8, 2023
@kylebuch8

kylebuch8 commented Nov 14, 2023

Copy link
Copy Markdown
Contributor

@bennypowers Should a form still be submitted if the required attribute is present on pf-text-input?

I added this code to the demo

<fieldset>
  <form id="pf-form">
    <legend>Text Input</legend>
    <label for="input">Input</label>
    <pf-text-input id="input" required></pf-text-input>
  </form>
</fieldset>

<script type="module">
  import '@patternfly/elements/pf-text-input/pf-text-input.js';

  const pfForm = document.querySelector('#pf-form');
  pfForm.addEventListener('submit', event => {
    event.preventDefault();

    console.log('pf-form submitted');
  });
</script>

<link rel="stylesheet" href="demo.css">

What I'm seeing is that event though the required attribute is present on pf-text-input, the form is still being submitted and the validation is not being caught.

@github-actions github-actions Bot added the demo Updating demo pages label Nov 14, 2023
@bennypowers

Copy link
Copy Markdown
Member Author

@kylebuch8

Copy link
Copy Markdown
Contributor

@bennypowers Very nice. Thanks.

@kylebuch8 kylebuch8 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Low-tuned Guitars Thrash Metal 🤘

@bennypowers
bennypowers merged commit 3d7ce5a into main Nov 14, 2023
@bennypowers
bennypowers deleted the feat/input/submit branch November 14, 2023 19:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed demo Updating demo pages functionality Functionality, typically pertaining to the JavaScript. ready to merge

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants